<template>
  <!-- 工单列表 开通详情 -->
  <a-modal :visible="true" :footer="null" :width="1300" @cancel="cancelEvent" class="orderModal">
    <div class="infoModal">工单列表</div>
    <div style="background:white">
      <div class="table-page-search-wrapper">
        <div style="height:20px"></div>
        <a-form layout="inline" class="formModel" style="margin-left:20px;margin-right:20px">
          <a-row :gutter="6">
            <a-col :md="6" :sm="24">
              <a-form-item label="所在地市">
                <a-input v-model="info.city" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="所在区县">
                <a-select v-model="info.country" placeholder="请选择">
                  <a-select-option value="">全区</a-select-option>
                  <a-select-option value="市工建">市工建</a-select-option>
                  <a-select-option value="鼓楼">鼓楼</a-select-option>
                  <a-select-option value="福清">福清</a-select-option>
                  <a-select-option value="长乐">长乐</a-select-option>
                  <a-select-option value="闽侯">闽侯</a-select-option>
                  <a-select-option value="罗源">罗源</a-select-option>
                  <a-select-option value="闽清">闽清</a-select-option>
                  <a-select-option value="连江">连江</a-select-option>
                  <a-select-option value="平潭">平潭</a-select-option>
                  <a-select-option value="永泰">永泰</a-select-option>
                  <a-select-option value="马尾">马尾</a-select-option>
                  <a-select-option value="台江">台江</a-select-option>
                  <a-select-option value="晋安">晋安</a-select-option>
                  <a-select-option value="仓山">仓山</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="CRM">
                <a-input v-model="info.crmNo" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="是否超时">
                <a-select v-model="info.timeOut" placeholder="请选择">
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                  <a-select-option value="">全部</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="6">
            <a-col :md="6" :sm="24">
              <a-form-item label="客户经理">
                <a-input v-model="info.kj" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="工单类型">
                <a-select v-model="info.type" placeholder="请选择">
                  <a-select-option :value="1">快开</a-select-option>
                  <a-select-option :value="2">查勘</a-select-option>
                  <a-select-option :value="3">快建</a-select-option>
                  <a-select-option :value="4">合同签订</a-select-option>
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="5">开通</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="数据源">
                <a-select v-model="info.source" placeholder="请选择">
                  <a-select-option value=" ">全部</a-select-option>
                  <a-select-option value="综资">综资</a-select-option>
                  <a-select-option value="施调">施调</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="查勘时间">
                <a-range-picker
                  @change="onChange"
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  v-model="kkselectTime"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" style="text-align:center">
              <a-button type="primary" @click="selectWorkListEvent()">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-row>
        <a-col :span="24" style="text-align:left">
          <a-button type="primary" @click="download">导出数据</a-button>
        </a-col>
      </a-row>

      <div ref="cmdlist">
        <a-table
          style="margin:0px 20px 20px 10px;"
          class="workTable"
          :pagination="false"
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="userData"
          :loading="tableLoading"
          @change="pageShow"
          :scroll="{ x: true, scrollToFirstRowOnChange: true }"
        >
        </a-table>
        <a-row>
          <a-col :span="12"></a-col>
          <a-col :span="12" style="text-align:right">
            <a-pagination
              :show-total="total => `共有 ${total} 条数据`"
              :default-current="1"
              :total="total"
              @change="pageShow"
            />
          </a-col>
        </a-row>
      </div>
      <div style="height:20px"></div>
    </div>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getOpenDetailList, exportExcelKKdetailList } from '@/api/public'
import { getNowTime, getNowFormatDate, isNoEmpty, hideCode } from '@/utils/util.js'
export default {
  props: ['queryParam'],
  components: {},
  data() {
    return {
      columns,
      info: {
        city: '福州'
      },
      kkselectTime: '',
      userData: [],
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      current: 1,
      pageSize: 10,
      tableLoading: false,
      total: 0
    }
  },

  created() {
    this.clearAllForm()
    this.info = JSON.parse(JSON.stringify(this.queryParam))
    this.info.country == '福州' ? delete this.info.country : ''
    this.info.current = this.current
    this.info.pageSize = this.pageSize
    this.info.city = '福州'
    this.kkselectTime = [moment(this.queryParam.startTime), moment(this.queryParam.endTime)]
    this.getWorkOrderListFunction()
    var that = this
    document.onkeydown = function(e) {
      let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
      if (e1 && e1.keyCode == 13) {
        that.selectWorkListEvent()
      }
    }
  },

  beforeMount() {},
  mounted() {},
  methods: {
    //表单清空
    clearAllForm() {
      for (var key in this.info) {
        delete this.info[key]
      }
    },

    moment,
    //查询
    selectWorkListEvent() {
      this.info.current = 1
      this.getWorkOrderListFunction()
    },
    cancelEvent() {
      this.clearAllForm()
      this.$emit('cancelEvent')
    },
    //时间改变
    onChange(date, dateStrings) {
      this.info.startTime = dateStrings[0] + ' 00:00:00'
      this.info.endTime = dateStrings[1] + ' 23:59:59'
    },
    //获取表格数据
    getWorkOrderListFunction() {
      this.tableLoading = true
      let info = JSON.parse(JSON.stringify(this.info))
      getOpenDetailList(info)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.userData = response.data.records.map(function(currentValue, index, arr) {
            currentValue.managerMobile = hideCode(currentValue.managerMobile, 3, 2)
            currentValue.projectName = hideCode(currentValue.projectName, 3, 2)
            return currentValue
          })

          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(current) {
      this.tableLoading = true
      this.info.current = current
      this.info.pageSize = this.pageSize
      let info = JSON.parse(JSON.stringify(this.info))
      getOpenDetailList(info)
        .then(response => {
          this.current = response.data.current
          this.total = response.data.total
          this.userData = response.data.records.map(function(currentValue, index, arr) {
            currentValue.managerMobile = hideCode(currentValue.managerMobile, 3, 2)
            currentValue.projectName = hideCode(currentValue.projectName, 3, 2)
            return currentValue
          })
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //文档导出
    download() {
      let info = JSON.parse(JSON.stringify(this.info))
      exportExcelKKdetailList(info)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '详情列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    }
  }
}
const columns = [
  {
    title: 'CRM工单号',
    dataIndex: 'crmNo',
    align: 'center'
  },
  {
    title: '所属区县名称',
    dataIndex: 'country',
    align: 'center'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    align: 'center'
  },
  {
    title: '客户经理',
    dataIndex: 'manager',
    align: 'center'
  },
  {
    title: '客户经理电话',
    dataIndex: 'managerMobile',
    align: 'center'
  },
  {
    title: '查勘派单时间',
    dataIndex: 'ckStartTime',
    align: 'center'
  },

  {
    title: '查勘办结时间',
    dataIndex: 'ckEndTime',
    align: 'center'
  },

  {
    title: '查勘历时',
    dataIndex: 'ckLong',
    align: 'center'
  },
  {
    title: '查勘是否超时',
    dataIndex: 'ckOverIs',
    align: 'center'
  },
  {
    title: '合同签订历时',
    dataIndex: 'htLong',
    align: 'center'
  },
  {
    title: '合同签订是否超时',
    dataIndex: 'htOverIs',
    align: 'center'
  },
  {
    title: '建设派单时间',
    dataIndex: 'ktStartTime',
    align: 'center'
  },
  {
    title: '建设办结时间',
    dataIndex: 'ktEndTime',
    align: 'center'
  },
  {
    title: '建设历时',
    dataIndex: 'ktLong',
    align: 'center'
  },
  {
    title: '建设是否超时',
    dataIndex: 'ktOverIs',
    align: 'center'
  },
  {
    title: '装机派单时间',
    dataIndex: 'kkStartTime',
    align: 'center'
  },
  {
    title: '装机办结时间',
    dataIndex: 'kkEndTime',
    align: 'center'
  },
  {
    title: '装机历时',
    dataIndex: 'kkLong',
    align: 'center'
  },

  {
    title: '装机是否超时',
    dataIndex: 'kkOverIs',
    align: 'center'
  },
  {
    title: '全流程历时',
    dataIndex: 'allLong',
    align: 'center'
  },
  {
    title: '全流程是否超时',
    dataIndex: 'allOverIs',
    align: 'center'
  },
  {
    title: '数据源',
    dataIndex: 'source',
    align: 'center'
  }
]
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
